const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: "./src/main.js", // 入口
    output: {
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "bundle.js" // 出口文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' // 以此为基准生成打包后html文件
        })
    ],
    module: {
        rules: [{
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/i,
                use: [ // compiles Less to CSS
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ],
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: [{
                    loader: 'url-loader', // 匹配文件, 尝试转base64字符串打包到js中
                    // 配置limit, 超过8k, 不转, file-loader复制, 随机名, 输出文件
                    options: {
                        limit: 8 * 1024,
                    },
                }, ],
            },
            {
                // 处理字体图标
                test: /\.eot|svg|ttf|woff|woff2/,
                type: 'asset/resource',
                generator: {
                    filename: 'font/[name].[hash:6][ext]'
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader', // 使用这个loader处理js文件
                    options: { // 加载器选项
                        presets: ['@babel/preset-env'] // 预设降级的 规则,按照(@babel/preset-ent)按照这种规则降级
                    }
                }
            }
        ],

    },
    // 自动刷新模块
    devServer: {
        port: 8000, // 端口号
        open: true // 自动打开浏览器
    }
}